<template>
  <div class="search-page">
    <van-sticky>
      <van-search v-model="search.keyword"
                  shape="round"
                  background="#d41e32"
                  show-action
                  placeholder="请输入搜索关键词"
                  @search="onSearch">
        <template #left>
          <van-icon name="arrow-left"
                    class="m-white"
                    style="margin-right:10px"
                    @click="$router.go(-1)" />
        </template>
        <template #action>
          <div @click="onSearch"
               class="m-white">搜索</div>
        </template>
      </van-search>
      <van-dropdown-menu>
        <van-dropdown-item v-model="search.typeVal"
                           :options="option1" />
        <van-dropdown-item v-model="search.sortVal"
                           :options="option2" />
        <van-dropdown-item title="筛选">
          <div class="filter-tag">
            <van-cell>
              <p style="padding-left:5px">品牌：</p>
              <div v-for="(item,idx) in optionBrand"
                   @click="search.brandVal = idx"
                   :class="{'tag-item':true,'active':search.brandVal === idx}">
                <span>{{item.title}}</span>
              </div>
            </van-cell>
            <van-cell>
              <p style="padding-left:5px">分类：</p>
              <div v-for="(item,idx) in optionCate"
                   @click="search.cateVal = idx"
                   :class="{'tag-item':true,'active':search.cateVal === idx}">
                <span>{{item.title}}</span>
              </div>
            </van-cell>
          </div>
          <div style="padding: 5px 16px;">
            <van-button type="danger"
                        block
                        round
                        @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <van-pull-refresh v-model="state.refreshing"
                      @refresh="onRefresh">
      <van-list class="goods-wrapper"
                v-model:loading="state.loading"
                :finished="state.finished"
                finished-text="没有更多了"
                @load="onLoad">
        <div class="goods"
             v-for="product in state.goodList">
          <GoodsItemCpm :value="product" />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import GoodsItemCpm from "/@cpms/GoodsItem.vue";
import { ref, reactive, onMounted } from "vue";

import { useRouter, useRoute } from "vue-router";
import { getSearchData } from "/@api/index";
export default {
  name: "Search",
  components: {
    GoodsItemCpm,
  },
  data () {
    return {};
  },
  setup () {
    const { query } = useRoute();
    const state = reactive({
      keyword: query.keyword || "",
      type_id: query.type_id || "",
      goodList: [],
      refreshing: false,
      loading: false,
      finished: false,
      limit: 20,
      total: 0,
    });
    const {
      search,
      option1,
      option2,
      optionBrand,
      optionCate,
      onConfirm,
      onSearch,
      onRefresh,
      onLoad,
    } = initTopSearch(state);

    return {
      state,
      search,
      option1,
      option2,
      optionBrand,
      optionCate,
      onConfirm,
      onSearch,
      onRefresh,
      onLoad,
    };
  },
};

// 初始化首页顶部搜索数据及方法
const initTopSearch = (state) => {
  const { path, query, params } = useRouter();
  const search = reactive({
    keyword: state.keyword,
    type_id: state.type_id,
    typeVal: 0,
    sortVal: "a",
    brandVal: "",
    cateVal: "",
  });
  const option1 = [
    { text: "全部商品", value: 0 },
    { text: "新款商品", value: 1 },
    { text: "活动商品", value: 2 },
  ];
  const option2 = [
    { text: "默认排序", value: "a" },
    { text: "好评排序", value: "b" },
    { text: "销量排序", value: "c" },
  ];
  const optionBrand = [
    { title: "品牌1" },
    { title: "品牌1" },
    { title: "品牌1" },
    { title: "品牌1" },
  ];
  const optionCate = [
    { title: "分类1" },
    { title: "分类1" },
    { title: "分类1" },
    { title: "分类1" },
  ];

  onMounted(() => {
    onSearch();
  });

  const onConfirm = () => { };
  const onSearch = async () => {
    const params = {
      page: 1,
      limit: state.limit,
      type_id: search.type_id,
      keyword: search.keyword,
    };
    const { data } = await getSearchData(params);
    state.goodList.push(...data.data.row);
    state.loading = false;
    state.total = data.data.page_info.total;
  };
  const onRefresh = () => {
    console.log("onRefresh");
    // 清空列表数据
    state.limit = 20;
    state.total = 0;
    state.finished = false;
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    state.loading = true;
    onSearch();
  };
  const onLoad = () => {
    console.log("onLoad");
    console.log(state);
    if (state.refreshing) {
      state.goodList = [];
      state.refreshing = false;
    }
    state.loading = true;
    state.limit += 10;
    onSearch().then(() => {
      if (state.goodList.length >= state.total) {
        state.finished = true;
      }
    });
  };
  return {
    search,
    option1,
    option2,
    optionBrand,
    optionCate,
    onConfirm,
    onSearch,
    onRefresh,
    onLoad,
  };
};
</script>

<style scoped lang="less">
.search-page {
  ::v-deep(.van-dropdown-menu__bar) {
    height: 40px;
  }
  .filter-tag {
    .tag-item {
      display: inline-block;
      flex-shrink: 0;
      width: 25%;
      padding: 5px;
      box-sizing: border-box;
      &.active {
        & > span {
          color: #fff;
          background-color: #d41e32;
        }
      }
      & > span {
        display: inline-block;
        width: 100%;
        padding: 4px 0;
        text-align: center;
        background-color: #eee;
      }
    }
  }
  .goods-wrapper {
    padding: 0 5px;
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .goods {
      width: 50%;
      padding: 0 5px;
      box-sizing: border-box;
      .product-item {
        width: 100%;
      }
    }
  }
}
</style>
